<template>
    <el-sub-menu 
      v-if="item.children?.length" 
      :index="resolvePath(item.path)"
    >
      <template #title>
        <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" />
        <span>{{ item.meta.title }}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
      />
    </el-sub-menu>
  
    <el-menu-item 
      v-else 
      :index="resolvePath(item.path)"
      @click="handleClickLink(item)"
    >
      <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" />
      <template #title>
        {{ item.meta.title }}
      </template>
    </el-menu-item>
</template>

<script setup>
import { isExternal } from '@/utils/validate'
import { resolveRoutePath } from '@/utils/router' // 新增路径处理方法

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  basePath: {  // 新增父级路径参数
    type: String,
    default: ''
  }
})

// 新增路径解析方法
const resolvePath = (routePath) => {
  if (isExternal(routePath)) return routePath
  return resolveRoutePath(routePath, props.basePath)
}

// 修改点击事件处理
const router = useRouter()
const handleClickLink = (item) => {
  if (isExternal(item.path)) {
    window.open(item.path)
  } else {
    router.push(resolvePath(item.path)).catch(()=>{})
  }
}
</script>
  